<template>
    <!-- 搜索页 -->
    <div class="search-page">
        <div class="search-box-top">
            <div class="search-logo">
                <h2>
                    <span>智能</span>
                    <img src="@/assets/image/search-logo.png" alt="" />
                    <span>搜搜</span>
                </h2>
            </div>
            <div class="search-input">
                <el-input
                    placeholder="搜人、案件、线索、历史、其他等"
                    v-model="searchInput"
                    class="input-with-select"
                    @keyup.enter.native="clickSearch"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="clickSearch"
                        >搜索</el-button
                    >
                </el-input>
            </div>
            <!-- 高级检索 -->
            <div class="advanced-search">
                <el-collapse v-model="activeName" @change="handleChange">
                    <el-collapse-item title="高级检索" name="高级检索">
                        <BaseForm :form="searchForm">
                            <el-form-item label="文件类型">
                                <el-checkbox-group
                                    v-model="searchForm.fileType"
                                >
                                    <el-checkbox
                                        :label="item"
                                        name="fileType"
                                        v-for="(item, index) in fileTypeList"
                                        :key="index"
                                    ></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="文档大小">
                                <el-checkbox-group
                                    v-model="searchForm.documentSize"
                                >
                                    <el-checkbox
                                        label="1M以内"
                                        name="documentSize"
                                    ></el-checkbox>
                                    <el-checkbox
                                        label="1-5M之间"
                                        name="documentSize"
                                    ></el-checkbox>
                                    <el-checkbox
                                        label="5-10M之间"
                                        name="documentSize"
                                    ></el-checkbox>
                                    <el-checkbox
                                        label="10M以上"
                                        name="documentSize"
                                    ></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-radio-group v-model="searchForm.sort">
                                    <el-radio label="默认"></el-radio>
                                    <el-radio label="浏览量"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </BaseForm>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div class="search-box-bottom">
            <div class="box-left">
                <BaseTabCard :tabList="searchTabs" @change="changeTab">
                    <template slot-scope="item">
                        <BaseInfoList
                            v-for="(ele, index) in item.data['content']"
                            :key="index"
                            :infolistObj="ele"
                        ></BaseInfoList>
                    </template>
                </BaseTabCard>
            </div>
            <div class="box-right">
                <div class="list-header">
                    <h3>搜搜热榜</h3>
                    <span @click="changeHeat"
                        ><i class="icon iconfont">&#xe79e;</i> 换一换</span
                    >
                </div>
                <div class="list-heat">
                    <ul>
                        <li v-for="(item, index) in heatList" :key="index">
                            <p>
                                <span class="index-list">{{ index + 1 }}</span>
                                <span class="text-list">{{ item.text }}</span>
                            </p>
                            <span
                                ><i class="icon iconfont flame-icon"
                                    >&#xe7b5;</i
                                >
                                {{ item.num }}</span
                            >
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BaseTabCard from '@/components/BaseTabCard';
import BaseInfoList from '@/components/BaseInfoList';
import BaseForm from '@/components/BaseForm';

const myPng = require('@/assets/image/my.png');

export default {
    name: 'SearchPage',
    components: {
        BaseTabCard,
        BaseInfoList,
        BaseForm
    },
    data() {
        return {
            searchInput: '',
            activeTab: '',
            activeName: '',
            searchForm: {
                fileType: [],
                documentSize: [],
                sort: ''
            },
            fileTypeList: [
                'doc',
                'ppt',
                'txt',
                'ofd',
                'pptx',
                'docx',
                'xls',
                'xlsx',
                'cebx',
                'tif',
                'jpg'
            ],
            // 搜索tabs数据
            searchTabs: [
                {
                    label: '人员',
                    key: 'personnel',
                    content: [
                        {
                            imgUrl: myPng,
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            imgUrl: myPng,
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            imgUrl: myPng,
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        }
                    ]
                },
                { label: '案件', key: 'case', content: [] },
                { label: '线索', key: 'clue', content: [] },
                { label: '索量统计', key: 'statistics', content: [] },
                { label: '历史', key: 'history', content: [] }
            ],
            // 热搜列表
            heatList: [
                { text: '高积分涉毒人员', num: 158 },
                { text: '高积分涉毒号码', num: 148 },
                { text: '前科人员', num: 138 },
                { text: '疑似团伙挖掘', num: 108 },
                { text: '反馈情况', num: 98 },
                { text: '涉毒人员聚集', num: 88 },
                { text: '实时预警', num: 84 },
                { text: '高危场所', num: 75 },
                { text: '关注人员', num: 66 },
                { text: '高危场所旅馆', num: 58 }
            ],
            clickNum: 1
        };
    },
    created() {},
    mounted() {},
    methods: {
        clickSearch() {
            this.$emit('go-search', this.searchInput, this.searchForm);
        },
        changeTab(active, list) {},
        changeHeat() {
            let list1 = [
                { text: '高积分涉毒人员', num: 158 },
                { text: '高积分涉毒号码', num: 148 },
                { text: '前科人员', num: 138 },
                { text: '疑似团伙挖掘', num: 108 },
                { text: '反馈情况', num: 98 },
                { text: '涉毒人员聚集', num: 88 },
                { text: '实时预警', num: 84 },
                { text: '高危场所', num: 75 },
                { text: '关注人员', num: 66 },
                { text: '高危场所旅馆', num: 58 }
            ];
            let list2 = [
                { text: '涉毒地点', num: 198 },
                { text: '涉毒案件', num: 178 },
                { text: '入所人员', num: 138 },
                { text: '疑似团伙轨迹', num: 108 },
                { text: '预警情况', num: 98 },
                { text: '涉毒人员聚集', num: 88 },
                { text: '实时预警', num: 84 },
                { text: '高危场所', num: 75 },
                { text: '关注人员', num: 66 },
                { text: '高危场所旅馆', num: 58 }
            ];
            this.clickNum++;
            if (this.clickNum % 2 == 0) {
                this.heatList = list2;
            } else {
                this.heatList = list1;
            }
        },
        handleChange() {}
    }
};
</script>

<style lang="less" scoped>
.search-page {
    padding-top: 1.5rem;
    .search-box {
        &-top {
            margin-bottom: 1.5rem;
            .search-logo {
                h2 {
                    margin-bottom: 2.67rem;
                    text-align: center;
                    img {
                        width: 9.33rem;
                        height: 5.75rem;
                        vertical-align: bottom;
                    }
                    span {
                        line-height: 3.92rem;
                        text-shadow: 0px 0px 0px rgba(35, 100, 217, 0.5);
                        font-size: 3.83rem;
                        font-family: ZhenyanGB-Regular, ZhenyanGB;
                        font-weight: 400;
                        &:first-child {
                            color: #ffa200;
                        }
                        &:last-child {
                            color: #2364d9;
                        }
                    }
                }
            }
            ::v-deep .search-input {
                text-align: center;
                .el-input-group {
                    width: 70.58rem;
                    // height: 4.5rem;
                    .el-input__inner {
                        border-radius: 0.83rem;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
                .el-input-group__append {
                    border: none;
                }
                .el-button {
                    background-color: #2364d9;
                    border-radius: 0.83rem;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    border-color: #2364d9;
                    height: 40px;
                    span,
                    i {
                        color: #fff;
                    }
                }
            }
            .advanced-search {
                width: 70.58rem;
                margin: 0 auto;
                p {
                    text-align: right;
                    padding: 0.8rem 0;
                }
                ::v-deep .el-form {
                    background-color: #fbfbfb;
                    .el-form-item {
                        margin-bottom: 0;
                    }
                    .el-form-item__label {
                        width: 7rem;
                    }
                    .btn-item {
                        display: none;
                    }
                }
                ::v-deep .el-collapse {
                    border-top: 0;
                    &-item {
                        .el-collapse-item__header {
                            justify-content: flex-end;
                            border-bottom: 0;
                        }
                        .el-collapse-item__arrow {
                            margin-left: 5px;
                        }
                        .el-collapse-item__wrap {
                            border-bottom: 0;
                        }
                        .el-collapse-item__content {
                            padding-bottom: 0;
                        }
                    }
                }
            }
        }

        &-bottom {
            display: flex;
            padding: 0 19rem;
            box-sizing: border-box;
            justify-content: space-between;
            .box {
                &-left {
                    ::v-deep .base-info-list {
                        justify-content: flex-start;
                        background-color: #fff;
                        height: auto;
                        img {
                            width: 8.33rem;
                            height: 8.33rem;
                        }
                        .info-people {
                            margin-left: 1.5rem;
                            line-height: 2.5rem;
                            p {
                                width: 28.5rem;
                                white-space: normal;
                                overflow: auto;
                                overflow-y: hidden;
                                span {
                                    font-size: 1.67rem;
                                    font-weight: 600;
                                }
                                .list-name {
                                    color: #333333;
                                    border-right-color: #333333;
                                }
                            }
                            h4 {
                                font-size: 1.5rem;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #999999;
                                line-height: 2.08rem;
                            }
                        }
                    }
                }
                &-right {
                    width: 35.25rem;
                    .list-header {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 1.33rem;
                        h3 {
                            font-size: 1.5rem;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #333333;
                            line-height: 2.08rem;
                        }
                        span {
                            font-size: 1.2rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #767c93;
                            line-height: 2.08rem;
                            cursor: pointer;
                        }
                    }
                    .list-heat {
                        ul {
                            li {
                                display: flex;
                                justify-content: space-between;
                                padding: 0 0.25rem;
                                margin-bottom: 1.33rem;

                                &:nth-child(1) {
                                    .index-list {
                                        color: #f56c6c;
                                    }
                                    .flame-icon {
                                        color: #f56c6c;
                                    }
                                }

                                &:nth-child(2) {
                                    .index-list {
                                        color: #ff5000;
                                    }
                                    .flame-icon {
                                        color: #f56c6c;
                                    }
                                }

                                &:nth-child(3) {
                                    .index-list {
                                        color: #ffa200;
                                    }
                                    .flame-icon {
                                        color: #f56c6c;
                                    }
                                }

                                span,
                                .index-list {
                                    font-size: 1.2rem;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #767c93;
                                    line-height: 1.58rem;
                                }
                                p {
                                    span {
                                        color: #333333;
                                    }
                                    .text-list {
                                        cursor: pointer;
                                    }
                                }
                                .index-list {
                                    margin-right: 1.5rem;
                                }
                                .flame-icon {
                                    margin-right: 0.67rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
